<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Cookie Sync</title>
    <style>
        body { font-family: sans-serif; width: 450px; padding: 8px; max-height: 600px; overflow-y: auto; }
        h3 { margin: 8px 0; font-size: 16px; }
        input { width: 100%; margin: 3px 0; padding: 5px; box-sizing: border-box; font-size: 12px; }
        button { width: 100%; padding: 6px; margin-top: 6px; cursor: pointer; background: #4CAF50; color: white; border: none; border-radius: 4px; font-size: 13px; }
        button:hover { background: #45a049; }
        #loginBtn { background: #ff9800; display: none; margin-top: 4px; }
        #loginBtn:hover { background: #e68900; }
        .btn-secondary { background: #2196F3 !important; }
        .btn-secondary:hover { background: #0b7dda !important; }
        .btn-danger { background: #f44336 !important; font-size: 11px !important; padding: 4px 6px !important; margin: 0 !important; width: auto !important; }
        .btn-danger:hover { background: #da190b !important; }
        #status { 
            color: green; 
            margin-top: 6px; 
            font-size: 11px;
            word-wrap: break-word;
            white-space: pre-wrap;
            max-height: 150px;
            overflow-y: auto;
            padding: 4px 0;
        }
        #cookieDetails { 
            display: none; 
            margin-top: 6px; 
            max-height: 250px; 
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f9f9f9;
        }
        #cookieToggle {
            background: rgba(33, 150, 243, 0.1);
            display: none;
            padding: 4px 8px;
            width: auto;
            height: auto;
            min-width: auto;
            margin: 0;
            border: 1px solid #2196F3;
            cursor: pointer;
            transition: all 0.2s;
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 3px;
            color: #2196F3;
            font-size: 11px;
            white-space: nowrap;
        }
        #cookieToggle:hover { 
            background: rgba(33, 150, 243, 0.3);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }
        .button-container {
            position: relative;
            min-height: 24px;
            margin-top: 6px;
        }
        .page-header h3 {
            margin: 8px 0;
        }
        .cookie-card {
            background: white;
            margin: 6px;
            padding: 8px;
            border-radius: 3px;
            border-left: 3px solid #4CAF50;
            font-size: 10px;
        }
        .cookie-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
            font-size: 11px;
        }
        .cookie-prop {
            margin: 2px 0;
            color: #666;
        }
        .cookie-prop span {
            color: #2196F3;
            font-weight: 500;
        }
        #history {
            margin-top: 8px;
            padding-top: 8px;
            padding-bottom: 10px;
            border-top: 1px solid #eee;
            font-size: 10px;
            color: #999;
        }
        #history > div {
            margin-bottom: 3px;
        }
        .config-section {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px;
            margin: 10px 0;
        }
        #configList {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            width: 100%;
        }
        .config-item {
            background: white;
            border-left: 3px solid #2196F3;
            padding: 8px;
            border-radius: 3px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            min-width: 0;
            box-sizing: border-box;
        }
        .config-item:hover {
            background: #f0f7ff;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .config-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .config-url {
            color: #666;
            font-size: 10px;
            margin: 2px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .config-actions {
            margin-top: 6px;
            display: flex;
            gap: 4px;
        }
        .config-actions button {
            flex: 1;
            margin: 0;
            padding: 4px 6px;
            font-size: 11px;
        }
        .section-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 2px solid #4CAF50;
            font-size: 13px;
        }
        .input-group {
            margin-bottom: 4px;
        }
        .input-group label {
            display: block;
            font-size: 11px;
            color: #666;
            margin-bottom: 2px;
        }
        .input-group input {
            padding: 4px;
            font-size: 12px;
        }
    </style>
</head>
<body>
<h3>🍪 爱回收Cookie同步</h3>

<!-- 已保存的配置列表 -->
<div class="config-section">
    <div class="section-title">📚 快速选择配置</div>
    <div id="configList"></div>
    <div id="emptyHint" style="color: #999; font-size: 11px; text-align: center; padding: 10px;">
        暂无保存的配置<br>
        <span style="font-size: 10px;">在下方输入地址后点击"💾 保存"</span>
    </div>
</div>

<!-- 当前操作区域 -->
<div class="section-title" style="margin-top: 15px;">📝 当前操作</div>
<div class="input-group">
    <label>配置名称:</label>
    <input id="configName" placeholder="例如：Davinci" />
</div>
<div class="input-group">
    <label>源地址（从哪里复制）:</label>
    <input id="sourceUrl" placeholder="http://dev.aihuishou.com:9910" value="http://dev.aihuishou.com:9910/ai-task" />
</div>
<div class="input-group">
    <label>目标地址（复制到哪里）:</label>
    <input id="targetUrl" placeholder="http://local.aihuishou.com:8000" value="http://local.aihuishou.com:8000/ai-task" />
</div>

<button id="saveConfigBtn" class="btn-secondary">💾 保存当前配置</button>
<button id="copyBtn">🔄 复制 Cookies</button>
<button id="loginBtn">🔑 打开源地址去登录</button>
<div class="button-container">
    <div id="status"></div>
    <button id="cookieToggle" title="查看Cookies详情">📋 查看详情</button>
</div>
<div id="cookieDetails"></div>

<div id="history">
    <div style="font-weight: bold; margin-bottom: 4px;">💡 使用提示</div>
    <div>• 点击配置"使用"快速切换地址</div>
    <div>• 输入地址后点击"💾 保存"新增配置</div>
</div>
<script src="popup.js"></script>
</body>
</html>
